<template>
  <div class="top-select">
    <el-select v-model="analysisArea" style="width:260px;">
      <el-option v-for="item in analysisAreas" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
  </div>
  <div class="bottom-box">
    <div class="box-item left-box">
      <el-table :data="tableData"
        style="flex:1; width: 100%;--el-table-border-color: none;overflow-y: auto;background-color: #192E37;"
        :row-class-name="getClassName" :header-cell-style="customHeaderCell" :cell-style="customCell">
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="p_mw" label="有功" />
        <el-table-column prop="q_mvar" label="无功" />
        <el-table-column prop="vm_pu" label="电压标幺" />
      </el-table>
      <div class="char-box" ref="chartDom"></div>
    </div>
    <div :style="{ width: $computeVw(20) }"></div>
    <div class="box-item right-box">
      <div class="right-top">
        <span class="title">故障信息</span>
        <li v-for="(item, index) in warning" :key="item">
          {{ `${index + 1}. ${item}` }}
        </li>
      </div>
      <div :style="{ height: $computeVw(20) }"></div>
      <el-table :data="tableData2"
        style="flex:1; width: 100%;--el-table-border-color: none;overflow-y: auto;background-color: #192E37;"
        :row-class-name="getClassName" :header-cell-style="customHeaderCell" :cell-style="customCell">
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="t1" label="时间段1" />
        <el-table-column prop="t2" label="时间段2" />
        <el-table-column prop="t3" label="时间段3" />
        <el-table-column prop="t4" label="时间段4" />
      </el-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch, onBeforeUnmount } from 'vue';
import axios from 'axios';
import * as echarts from 'echarts';
import { BASE_URL } from '@/utils/common.js'
import elTableMixin from '@/utils/elTableMixin.js'
const { customHeaderCell, customCell, getClassName } = elTableMixin();

const warning = ref([])

const tableData = ref([])
const analysisAreas = ref([])

const analysisArea = ref('')
const stMapList = ref({})
const recovers = ref([])
const tableData2 = ref([])

let chartDom = ref(null)


const taskCart = () => {

  var myChart = echarts.init(chartDom.value);
  var option = {
    xAxis: {
      type: 'category',
      data: ['1', '2', '3', '4', '5', '6', '7'],
      axisLine: {
        lineStyle: {
          color: 'rgba(63, 136, 147, 0.4)',
        }
      },
      axisLabel: {
        show: false
      },
      axisTick: {
        show: false, // 刻度线显示
      },

    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: `{value}`,
        color: '#FEFFFF',
        // margin: 20,
      },
      splitLine: {
        show: true,
        lineStyle: {
          // 网格线的颜色
          color: 'rgba(63, 136, 147, 0.4)',
        }
      }
    },
    grid: {
      show: false, // 显示网格
      bottom: '14%',
      containLabel: true,
      // 通过调整 top 和 bottom 可以设置 y 轴的上下边距
      top: '15%', // 上边距
    },
    // dataZoom: [{
    //   type: 'slider', // 缩放条类型
    //   xAxisIndex: 0, // 对应的 x 轴索引
    //   start: 0, // 缩放起始位置（百分比）
    //   end: 100, // 缩放结束位置（百分比）\
    //   orient: 'horizontal', // 设置为横向
    //   inside: true // 在图表内部显示
    // }],
    tooltip: {
      trigger: "axis"
    },
    series: [
      {
        data: recovers.value,
        type: 'bar',
        barWidth: '40px',
        itemStyle: {
          color: '#00D7BE',
        }
      }
    ]
  };
  option && myChart.setOption(option);
}

onMounted(
  async () => {
    try {
      const response = await axios.get(BASE_URL + '/getFaultTwoObj')
      console.log(response.data)
      for (let i = 0; i < response.data.sts.length; i++) {
        let st = response.data.sts[i]
        console.log(st)
        analysisAreas.value.push({ value: st, label: st })
      }
      analysisArea.value = response.data.sts[0]
      stMapList.value = response.data.stMapList
      tableData.value = stMapList.value[analysisArea.value]
      recovers.value = response.data.recovers
      warning.value = response.data.warning
      tableData2.value = response.data.genList
    } catch (error) {
      console.log(error)
    }
    taskCart()
  }

)

watch(analysisArea, (newVal, oldVal) => {
  tableData.value = stMapList.value[newVal]
})

</script>

<style scoped lang="scss">
.top-select {
  margin: computeVh(20) 0;
}

.bottom-box {
  display: flex;
  overflow: hidden;

  .box-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    // background-color: #192E37;
  }

  .left-box {
    border: 1px solid #3F8893;
    display: flex;
    flex-direction: column;

    .char-box {
      width: 100%;
      height: 32vh;
      background-color: #19252f;
    }
  }

  .right-box {
    flex: 1;
    display: flex;
    flex-direction: column;

    .right-top {
      flex: 1;
      background-color: #19252f;
      border: 1px solid #3F8893;
      // overflow: auto;

      .title {
        display: block;
        padding: 17px 30px;
        font-weight: bold;
        font-size: 16px;
        color: #42FFE7;
        background-color: rgba(35, 68, 88, 0.5)
      }

      li {
        list-style-type: none;
        padding: 10px 30px;
        color: #feffff;
        background-color: rgba(35, 68, 88, 0.5);
      }

      li:nth-child(even) {
        background-color: #19252f;
      }
    }
  }
}
</style>